<template>
  <div id="teamAddPage">
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
            v-model="addTeamData.name"
            name="队伍名称"
            label="队伍名称"
            placeholder="队伍名称"
            :rules="[{ required: true, message: '请填写队伍名称' }]"
        />
        <van-field
            v-model="addTeamData.description"
            rows="3"
            autosize
            label="队伍描述"
            type="textarea"
            placeholder="请输入队伍描述"
        />
        <van-field name="stepper" label="队伍最大人数" max="10" min="3">
          <template #input>
            <van-stepper v-model="addTeamData.maxNum"/>
          </template>
        </van-field>
        <van-field
            is-link
            readonly
            name="datetimePicker"
            label="过期时间"
            :placeholder="currentDate.join('-') + ' ' + (currentTime.join(':') || '点击选择过期时间')"
            @click="showPicker = true"
        />
        <van-popup v-model:show="showPicker" position="bottom">
          <van-picker-group
              title="请选择过期时间"
              :tabs="['选择日期', '选择时间']"
              next-step-text="下一步"
              @confirm="onConfirm"
          >
            <van-date-picker v-model="currentDate" :min-date="minDate" />
            <van-time-picker v-model="currentTime" />
          </van-picker-group>
        </van-popup>
          <van-field name="radio" label="队伍状态">
            <template #input>
              <van-radio-group v-model="addTeamData.teamStatus" direction="horizontal">
                <van-radio name="0">公开</van-radio>
                <van-radio name="1">私有</van-radio>
                <van-radio name="2">加密</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field
              v-if="Number(addTeamData.teamStatus) === 2"
              v-model="addTeamData.password"
              type="password"
              name="密码"
              label="密码"
              placeholder="请填写密码"
              :rules="[{ required: true, message: '请填写密码' }]"
          />
      </van-cell-group>
      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script setup lang="ts">
import {ref} from "vue";
import 'vant/es/date-picker/style';
import myAxios from "../plugins/myAxios.js";
import {showFailToast, showSuccessToast} from "vant";
import {useRouter} from "vue-router";

const router = useRouter();

const initFormData = {
  "name": "",
  "description": "",
  "maxNum": 3,
  "expireTime": null,
  "teamStatus": 0,
  "password": "",
}
const currentDate = ref([]);
const currentTime = ref([]);
const minDate = new Date();

const switchStringToDate = () => {
  console.log("currentDate:", currentDate.value); // 查看真实数据结构
  console.log("currentTime:", currentTime.value); // 查看真实数据结构
  if (currentDate.value.length > 0 && currentTime.value.length > 0){
    const year = Number(currentDate.value[0]);
    const month = Number(currentDate.value[1])-1;
    const day = Number(currentDate.value[2]);
    const hours = Number(currentTime.value[0]);
    const minutes = Number(currentTime.value[1]);
    const date = new Date(year, month, day, hours, minutes);
    return date.getTime();
  }
  return null;
}

//用户填写的表单数据
const addTeamData = ref({...initFormData,})

const result = ref('');
const showPicker = ref(false);

const onConfirm = (value: any) => {
  result.value = value;
  showPicker.value = false;
};

const onSubmit = async () => {
  const postData = {
    ...addTeamData.value,
    expireTime: switchStringToDate(),
    status: Number(addTeamData.value)
  }
  const res = await myAxios.post('/team/add', postData);
  if (res?.code === 0){
    showSuccessToast('添加成功');
    router.push({
      path: '/team',
      replace: true,
    });
  }else {
    showFailToast('添加失败，' + res.description);
  }

}


</script>

<style scoped>

</style>